<template>
  <div title="创建直播间">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="直播间名称" prop="name"
        ><el-input class="max-w460" v-model="ruleForm.name"></el-input
      ></el-form-item>

      <el-form-item label="直播封面图" prop="coverImgId">
        <div>
          <el-button type="primary" @click="openUpload('cover')"
            >上传图片</el-button
          >
          <img
            :src="coverImgPath"
            class="mt10"
            :width="120"
            v-if="ruleForm.coverImgId != ''"
          />
          <div class="gray9">建议尺寸1080*1920,大小不超过2M</div>
          <!--上传图片组件-->
          <Upload
            v-if="isupload"
            :isupload="isupload"
            @returnImgs="returnImgsFunc"
            >上传图片</Upload
          >
        </div>
      </el-form-item>

      <el-form-item label="直播时间">
        <div class="d-s-c">
          <el-form-item prop="startTime" style="margin-right: 20px">
            <el-date-picker
              v-model="ruleForm.startTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择开始时间"
            ></el-date-picker>
          </el-form-item>
          <!-- <el-col class="line" :span="2">-</el-col> -->
          <el-form-item prop="endTime">
            <el-date-picker
              v-model="ruleForm.endTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="选择结束时间"
            ></el-date-picker>
          </el-form-item>
        </div>
      </el-form-item>

      <el-form-item label="主播昵称" prop="anchorName"
        ><el-input class="max-w460" v-model="ruleForm.anchorName"></el-input
      ></el-form-item>

      <el-form-item label="主播微信号" prop="anchorWechat"
        ><el-input class="max-w460" v-model="ruleForm.anchorWechat"></el-input
      ></el-form-item>

      <el-form-item label="直播分享图" prop="shareImgId">
        <div>
          <el-button type="primary" @click="openUpload('share')"
            >上传图片</el-button
          >
          <img
            :src="shareImgPath"
            class="mt10"
            :width="120"
            v-if="ruleForm.shareImgId != ''"
          />
          <div class="gray9">建议像素800*640，大小不超过1M</div>
          <!--上传图片组件-->
          <Upload
            v-if="isupload"
            :isupload="isupload"
            @returnImgs="returnImgsFunc"
            >上传图片</Upload
          >
        </div>
      </el-form-item>
      <el-form-item label="购物直播频道封面图" prop="feedsImgId">
        <div>
          <el-button type="primary" @click="openUpload('feeds')"
            >上传图片</el-button
          >
          <img
            :src="feedsImgPath"
            class="mt10"
            :width="120"
            v-if="ruleForm.feedsImgId != ''"
          />
          <div class="gray9">建议像素800*800，大小不超过100KB</div>
          <!--上传图片组件-->
          <Upload
            v-if="isupload"
            :isupload="isupload"
            @returnImgs="returnImgsFunc"
            >上传图片</Upload
          >
        </div>
      </el-form-item>
      <!--      <el-form-item label="推流类型" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio :label="0">手机直播</el-radio>
          <el-radio :label="1">推流</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item label="是否开启点赞" prop="closeLike">
        <el-radio-group v-model="ruleForm.closeLike">
          <el-radio :label="0">开启</el-radio>
          <el-radio :label="1">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否开启直播货架" prop="closeGoods">
        <el-radio-group v-model="ruleForm.closeGoods">
          <el-radio :label="0">开启</el-radio>
          <el-radio :label="1">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否开启评论" prop="closeComment">
        <el-radio-group v-model="ruleForm.closeComment">
          <el-radio :label="0">开启</el-radio>
          <el-radio :label="1">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <div>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
      <el-button @click="cancelFunc()">取 消</el-button>
      <el-button
        type="primary"
        @click="submitForm('ruleForm')"
        :loading="loading"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import LiveApi from "@/api/live.js";
import Upload from "@/components/file/Upload.vue";

export default {
  components: {
    /*图片上传*/
    Upload: Upload,
  },

  data() {
    return {
      /*是否上传图片*/
      isupload: false,
      isImg: false,
      type: "",
      liveId: "",

      coverImgPath: "",
      shareImgPath: "",
      feedsImgPath: "",

      ruleForm: {
        name: "",
        coverImgId: 0,
        startTime: "",
        endTime: "",
        anchorName: "",
        anchorWechat: "",
        shareImgId: "",
        feedsImgId: "",
        type: "",
        closeLike: "",
        closeGoods: "",
        closeComment: "",
      },

      rules: {
        name: [
          { required: true, message: "请输入直播间名称", trigger: "blur" },
          {
            min: 3,
            max: 17,
            message: "长度在 3 到 17 个字符",
            trigger: "blur",
          },
        ],
        anchorName: [
          { required: true, message: "请输入主播昵称", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        anchorWechat: [
          { required: true, message: "请输入主播微信号", trigger: "blur" },
        ],
        coverImgId: [
          { required: true, message: "请选择封面图片", trigger: "change" },
        ],
        shareImgId: [
          { required: true, message: "请选择分享图片", trigger: "change" },
        ],
        feedsImgId: [
          {
            required: true,
            message: "请选择购物直播频道封面图",
            trigger: "change",
          },
        ],
        startTime: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        type: [
          { required: true, message: "请选择推流类型", trigger: "change" },
        ],
        closeLike: [
          { required: true, message: "请选择是否开启点赞", trigger: "change" },
        ],
        closeGoods: [
          {
            required: true,
            message: "请选择是否开启直播货架",
            trigger: "change",
          },
        ],
        closeComment: [
          { required: true, message: "请选择是否开启评论", trigger: "change" },
        ],
        auditStatus: [
          { required: true, message: "请选择是否审核通过", trigger: "change" },
        ],
      },

      /*左边长度*/
      formLabelWidth: "120px",
      loading: false,
    };
  },

  watch: {
    open: function (n, o) {
      if (n != o) {
        this.dialogVisible = n;
      }
    },
  },

  props: [],

  created() {},

  methods: {
    submitForm(formName) {
      let self = this;
      self.loading = true;
      self.$refs[formName].validate((valid) => {
        if (valid) {
          let param = self.ruleForm;
          LiveApi.createRoom(param, true)
            .then((data) => {
              self.loading = false;
              ElMessage({
                message: "创建成功",
                type: "success",
              });
              this.$router.back(-1);
            })
            .catch((error) => {
              self.loading = false;
            });
        } else {
          self.loading = false;
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },

    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    },

    /*上传图片*/
    uploadFile(fileId) {
      let self = this;
      const loading = ElLoading.service({
        lock: true,
        text: "文件上传中,请等待",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      LiveApi.uploadFile({ fileId }, (err) => {
        loading.close();
      })
        .then((response) => {
          loading.close();
          ElMessage({
            message: "上传文件成功",
            type: "success",
          });
        })
        .catch((response) => {
          loading.close();
        });
    },

    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        if (this.type == "cover") {
          this.coverImgPath = e[0].filePath;
          this.ruleForm.coverImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.coverImgId);
        } else if (this.type == "share") {
          this.shareImgPath = e[0].filePath;
          this.ruleForm.shareImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.shareImgId);
        } else if (this.type == "feeds") {
          this.feedsImgPath = e[0].filePath;
          this.ruleForm.feedsImgId = e[0].fileId;
          this.uploadFile(this.ruleForm.feedsImgId);
        }
      }
      this.isupload = false;
    },
  },
};
</script>

<style scoped>
.img {
  margin-top: 10px;
}
</style>
